<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <el-dialog title="待处理异常" :visible.sync="Show" :close-on-click-modal="false" :close-on-press-escape="false" :fullscreen='true' :show-close='false' append-to-body custom-class="outerdoor-fulldialog">
    <!-- 自定义关闭按钮 -->
    <span class="custom-dialog-btn" @click="closeDialog" style="top:14px;">
            <i class="el-icon-close"></i>
        </span>
    <div class="table-container">
      <div class="table-container__table">
        <el-radio-group v-model="radioType" @change="switchTable">
          <el-radio-button :label="item.channelId" v-for="item in channelLists" :key="item.channelId">
            <el-badge :value="item.count>100?'99+':item.count" class="badge-channel">{{item.channelName}}</el-badge>
          </el-radio-button>
        </el-radio-group>
        <el-table :data="list" :key="tableKey"  v-loading="listLoading" style="width: 100%;margin-top: 10px;" v-if="params.channelId!=='5'&&params.channelId!=='11'">
          <el-table-column label="建筑名">
            <template slot-scope="scope">
              <span>{{scope.row.bName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号">
            <template slot-scope="scope">
              <span>{{scope.row.sensorNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{scope.row.equipmentType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼层">
            <template slot-scope="scope">
              <span>{{scope.row.floor}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述">
            <template slot-scope="scope">
              <span>{{scope.row.positionDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="测点">
            <template slot-scope="scope">
              <span>{{scope.row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警类型">
            <template slot-scope="scope">
              <span :class="{ fire:scope.row.alrmCategory==1 ,break:scope.row.alrmCategory==0 }">{{scope.row.alrmType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间">
            <template slot-scope="scope">
              <span>{{scope.row.alrmDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平面图" v-if="planSetup==1">
            <template slot-scope="scope">
              <span class="img" @click="viewimg(scope.row,scope.row.floor)">查看平面图</span>
            </template>
          </el-table-column>
          <el-table-column label="是否处理" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleAlarm(scope.row)">处理
              </el-button>
            </template>
          </el-table-column>
<!--          <el-table-column label="" fixed="right" width="30">-->
<!--            <template slot-scope="scope">-->
<!--                    <span class="icon-nf-copy">-->
<!--                    <icon-svg icon-class="copy" style="fill:#dfdfdf"/>-->
<!--                    <em @click="handleCopy(scope.row.logId,$event)" class="icon-nf-copy-btn"></em>-->
<!--                    </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-table :data="list" :key="tableKey"  v-loading="listLoading" style="width: 100%;margin-top: 10px;" v-if="params.channelId==='5'">
          <el-table-column label="消火栓名称">
            <template slot-scope="scope">
              <span>{{scope.row.hydrantName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号">
            <template slot-scope="scope">
              <span>{{scope.row.sensorNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{scope.row.equipmentType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述">
            <template slot-scope="scope">
              <span>{{scope.row.positionDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="测点">
            <template slot-scope="scope">
              <span>{{scope.row.measuringPoint}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警类型">
            <template slot-scope="scope">
              <span class="break">{{scope.row.alrmType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间">
            <template slot-scope="scope">
              <span>{{scope.row.alrmDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置信息">
            <template slot-scope="scope">
              <span class="img" @click="viewpos(scope.row.fireCockId)">查看位置</span>
            </template>
          </el-table-column>
          <el-table-column label="是否处理" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleAlarm(scope.row)">处理
              </el-button>
            </template>
          </el-table-column>
<!--          <el-table-column label="" fixed="right" width="30">-->
<!--            <template slot-scope="scope">-->
<!--                    <span class="icon-nf-copy">-->
<!--                    <icon-svg icon-class="copy" style="fill:#dfdfdf"/>-->
<!--                    <em @click="handleCopy(scope.row.logId,$event)" class="icon-nf-copy-btn"></em>-->
<!--                    </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-table :data="list" :key="tableKey"  v-loading="listLoading" style="width: 100%;margin-top: 10px;" v-if="params.channelId==='11'">
          <el-table-column label="建筑名">
            <template slot-scope="scope">
              <span>{{scope.row.bName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消防主机ID">
            <template slot-scope="scope">
              <span>{{scope.row.fireMainId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="回路">
            <template slot-scope="scope">
              <span>{{scope.row.sensorLoop}}</span>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="scope">
              <span>{{scope.row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{scope.row.series}}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼层">
            <template slot-scope="scope">
              <span>{{scope.row.floor}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述">
            <template slot-scope="scope">
              <span>{{scope.row.positionDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平面图" v-if="planSetup==1">
            <template slot-scope="scope">
              <span class="img" @click="viewimg(scope.row,scope.row.floor)">查看平面图</span>
            </template>
          </el-table-column>
          <el-table-column label="报警类型">
            <template slot-scope="scope">
              <span :class="{ fire:scope.row.alrmCategory==1 ,break:scope.row.alrmCategory==0 }">{{scope.row.alrmType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间">
            <template slot-scope="scope">
              <span>{{scope.row.alrmDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否处理" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleAlarm(scope.row)">处理
              </el-button>
            </template>
          </el-table-column>
<!--          <el-table-column label="" fixed="right" width="30">-->
<!--            <template slot-scope="scope">-->
<!--                    <span class="icon-nf-copy">-->
<!--                    <icon-svg icon-class="copy" style="fill:#dfdfdf"/>-->
<!--                    <em @click="handleCopy(scope.row.logId,$event)" class="icon-nf-copy-btn"></em>-->
<!--                    </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </div>
    <planDialog :Show.sync="realtimePointShow" :buildId.sync="buildId" :channelId.sync="params.channelId" :newfloor.sync="newfloor"></planDialog>
    <fmplanDialog :Show.sync="fmrealtimePointShow" :buildId.sync="buildId" :channelId.sync="params.channelId" :newfloor.sync="newfloor"></fmplanDialog>
    <el-dialog title="处理提示"
               :visible.sync="isdelalram"
               :show-close='false'
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               append-to-body
               custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <el-radio-group v-model="switchalramtype" v-if="alarmtype==1">
          <el-radio label="1">真实火警</el-radio>
          <el-radio label="2">火警测试</el-radio>
          <el-radio label="0">误报</el-radio>
        </el-radio-group>
        <p v-else>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleSure">确定</el-button>
        <el-button size="mini" type="text" @click="isdelalram=false">取消</el-button>
      </div>
    </el-dialog>
    <positionDialog :Show.sync="realtimehyrantShow" :id.sync="hydrantId"></positionDialog>
  </el-dialog>
</template>

<script>
  import clip from '@/utils/clipboard' // use clipboard directly

  import planDialog from '@/views/device/realtimeMonit/components/realtimePoints';
  import positionDialog from "@/views/device/realtimeMonit/components/outdoorPosition";
  import fmplanDialog from '@/views/device/fireMainframe/components/realtimePoints';

  import {
    selectCount,
    selectAlrmType,
    pageList,
    selectCountByBuild,
    getSelected,
    changeRsolve,
    changeFireRsolve,
    getChannleList,
    getsChannleList,
    outerdoorHandler,
    getRecordList,//消防主机异常记录
    fmchangeFireRsolve//消防主机处理
  } from "@/api/device/exceptionRecord/index";
  export default {
    name: "warningHandlerRecord",
    components: {planDialog,positionDialog,fmplanDialog},
    props: {
      Show: {
        required: true,
        default: false
      }
    },
    data() {
      return {
        radioType:1,
        hydrantId:'',
        realtimehyrantShow:false,
        totalbreak:'',
        alarmtype:'',
        channelLists:[],
        tableKey: 0,
        isdelalram:false,
        realtimePointShow:false,
        fmrealtimePointShow:false,
        switchalramtype:'1',
        planSetup:"0",
        buildId:"",
        newfloor:1,
        params:{
          channelId:"1",
          tag:'0'
        },
        total: 0,
        list: [],
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 15,
        },
      };
    },
    methods: {
      closeDialog() {
        //当面板关闭(点击关闭按钮)
        this.$emit("update:Show", false);
      },
      channelList(){
        //报警记录列表
        getChannleList().then(res=>{
           this.channelLists = res.data;
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        if (this.params.channelId==='5'){
          this.spagelist();
        }else if(this.params.channelId==='11'){
          this.getFirmList();
        }else{
          this.getList();
        }
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        if (this.params.channelId==='5'){
          this.spagelist();
        }else if(this.params.channelId==='11'){
          this.getFirmList();
        }
        else{
          this.getList();
        }
      },
      handleCopy(text, event) {
        clip(text+'', event)
      },
      handleAlarm(row){
        this.rowdata=row;
        this.alarmtype=row.alrmCategory;
        this.isdelalram=true;
      },
      handleSure(){
        if (this.alarmtype==1) {//火警
          if(this.tableKey===11){
            fmchangeFireRsolve(this.$qs.stringify({id:this.rowdata.id,flag:this.switchalramtype})).then(res=>{
              if(res.status===200){
                this.$notify({
                  title: "成功",
                  message: "处理成功",
                  type: "success",
                  duration: 2000
                });
                this.isdelalram=false;
                this.getFirmList();
              }
            }).catch(res=>{
              this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
              });
              this.isdelalram=false;
            })
          }else {
            changeFireRsolve(this.$qs.stringify({id:this.rowdata.id,flag:this.switchalramtype})).then(res=>{
              if(res.status===200){
                this.$notify({
                  title: "成功",
                  message: "处理成功",
                  type: "success",
                  duration: 2000
                });
                this.isdelalram=false;
                this.getList();
              }
            }).catch(res=>{
              this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
              });
              this.isdelalram=false;
            })
          }
        }else{//故障
          if(this.alarmtype){
            if (this.tableKey===11){
              fmchangeFireRsolve(this.$qs.stringify({id:this.rowdata.id})).then(res=>{
                if(res.status===200){
                  this.$notify({
                    title: "成功",
                    message: "处理成功",
                    type: "success",
                    duration: 2000
                  });
                  this.isdelalram=false;
                  this.getFirmList();
                }
              }).catch(res=>{
                this.$notify({
                  title: "提示",
                  message: "网络异常！",
                  type: "warning",
                  duration: 2000
                });
                this.isdelalram=false;
              })
            }else {
              changeRsolve(this.$qs.stringify({id:this.rowdata.id})).then((res)=>{
                if(res.status===200){
                  this.$notify({
                    title: "成功",
                    message: "处理成功",
                    type: "success",
                    duration: 2000
                  });
                  this.isdelalram=false;
                  this.getList();
                }
              }).catch((res)=>{
                this.$notify({
                  title: "提示",
                  message: "网络异常！",
                  type: "warning",
                  duration: 2000
                });
                this.isdelalram=false;
              })
            }
          }else{
            outerdoorHandler(this.$qs.stringify({id:this.rowdata.id})).then(res=>{
              if(res.status===200){
                this.$notify({
                  title: "成功",
                  message: "处理成功",
                  type: "success",
                  duration: 2000
                });
                this.isdelalram=false;
                this.channelList();
                this.spagelist();
              }
            })
          }

        }
      },
      switchTable(val) {
        this.params.channelId = String(val);
        // 切换按钮时重置分页查询条件
        this.listQuery.limit=15;
        this.listQuery.page=1;
        this.tableKey = val;
        if (val===5){
          this.spagelist();
        }else if (val===11){
          this.getFirmList();
        }else{
          this.getList();
        }
      },
      viewimg(row,floor){
        this.buildId=row.buildId+"";
        this.newfloor=floor;
        if (this.tableKey==11){
          this.fmrealtimePointShow = true;
        } else{
          this.realtimePointShow=true;
        }
      },
      viewpos(rowid){
        this.hydrantId = rowid;
        this.realtimehyrantShow = true;
      },
      pagelist(){
        this.listLoading = true;
        pageList(Object.assign(this.listQuery,this.params)).then(response => {
          this.total = response.data.total;
          this.list = response.data.rows;
          this.listLoading = false;
        })
      },
      spagelist(){
        this.listLoading = true;
        getsChannleList(Object.assign(this.listQuery,this.params)).then(response => {
          this.total = response.data.total;
          this.list = response.data.rows;
          this.listLoading = false;
        })
      },
      rmpagelist(){
        this.listLoading = true;
        getRecordList(Object.assign(this.listQuery,this.params)).then(response => {
          this.total = response.data.total;
          this.list = response.data.rows;
          this.listLoading = false;
        })
      },
      getFirmList(){
        this.$store.dispatch("getImgAuth").then(()=>{
          this.planSetup=this.$store.getters.planSetup;
        });
        this.channelList();
        this.rmpagelist();
      },
      getList(){
        this.$store.dispatch("getImgAuth").then(()=>{
          this.planSetup=this.$store.getters.planSetup;
        });
         this.channelList();
         this.pagelist();
      }
    },
    mounted() {
    },
    watch:{
      Show(v) {
        if (v) {
          let self = this;
          this.$nextTick(() => {
            self.getList()
          });
        } else {
          this.list = [];
          this.radioType = 1;
          this.params.channelId = '1';
        }
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .outerdoor-fulldialog > div {
    margin: 0 100px;
  }
  .outerdoor-fulldialog .el-dialog__title {
    font-size: 32px;
  }
  .outerdoor-fulldialog {
    .img {
      color: #50E3C2;
      cursor: pointer;
    }
    .fire{
      color:#E4393C;
    }
    .break{
      color:#FFAF40;
    }
    .icon-nf-copy{
      cursor: pointer;
      position: relative;
      .icon-nf-copy-btn{
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
    .badge-channel{
      .el-badge__content.is-fixed{
        z-index: 9;
        top: -12px;
        right: 3px;
      }
    }
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 20px;
      top: 10px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
  }
</style>
